import React, { useState,useRef } from "react";


// useRef 用法同 React.createRef() 。
/**  
 * useRef与createRef的区别
 * createRef‌：每次组件渲染都会返回一个新的引用对象，适用于类组件。
 * ‌useRef‌：返回的ref对象在整个组件生命周期内保持不变，适用于函数组件。useRef更适合函数组件的使用场景，因为它不会因为组件的重新渲染而重新创建ref对象‌
*/
function App() {

  const [list, setList] = useState(["aa", "bb", "cc"]);
  const mytext = useRef(); // React.createRef()

  const handleAdd = () => {
    console.log(mytext.current.value);

    // list.push("")
    setList([...list, mytext.current.value]);

    //清空
    // settext("")
    mytext.current.value = "";
  };

  const handleDel = (index) => {
    console.log(index);
    var newlist = [...list];
    newlist.splice(index, 1);
    setList(newlist);
  };
  return (
    <div>
      <input ref={mytext} />
      <button onClick={handleAdd}>add</button>
      <ul>
        {list.map((item, index) => (
          <li key={item}>
            {item}
            <button onClick={() => handleDel(index)}>del</button>
          </li>
        ))}
      </ul>

      {!list.length && <div>暂无待办事项</div>}
    </div>
  );
}

export default App